<template>
    <view class="template-detail-page">
        <!-- 导航栏 -->
        <NavBar @back="goBack"></NavBar>

        <!-- 内容区域 -->
        <scroll-view scroll-y class="content-scroll">
            <view class="content">
                <!-- 模板预览 -->
                <view class="template-preview" :style="{ background: templateData.color }">
                    <image class="template-image" :src="templateData.previewImageUrl" mode="widthFix"
                        @error="handleImageError" />
                </view>

                <!-- 模板信息 -->
                <view class="template-info">
                    <text class="template-name">{{ templateData.name }}</text>
                    <view class="template-stats">
                        <text class="download-count">{{ templateData.downloadCount }}次下载</text>
                        <text class="view-count">{{ templateData.viewCount || 0 }}次查看</text>
                    </view>
                </view>

                <!-- 会员提示 -->
                <view class="member-tip">
                    <text class="tip-text">如果您不是会员，请联系微信客服付费开通</text>
                </view>

                <!-- 二维码区域 -->
                <view class="qr-section">
                    <view class="qr-card">
                        <view class="qr-code">
                            <image src="@/static/images/wechat.jpg" mode="aspectFit"></image>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

        <!-- 底部下载按钮 -->
        <view class="download-section">
            <view class="download-btn" @click="handleDownload">
                <text class="download-text">下载模板</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useNavBar } from '@/hooks/useNavBar'
import { downloadResumeTemplate } from '@/api/resume'
import NavBar from '@/components/NavBar.vue'

const { statusBarHeight, navBarHeight } = useNavBar()

// 模板数据
const templateData = ref({
    id: 0,
    name: '',
    previewImageUrl: '',
    downloadCount: 0,
    viewCount: 0,
    color: ''
})

// 页面加载时获取参数
onLoad((options) => {
    if (options) {
        templateData.value = {
            id: options.id || 0,
            name: decodeURIComponent(options.name || ''),
            previewImageUrl: decodeURIComponent(options.previewImageUrl || ''),
            downloadCount: parseInt(options.downloadCount || '0'),
            color: options.color || '',
            viewCount: parseInt(options.viewCount || '0')
        }
    }
})

// 返回上一页
const goBack = () => {
    uni.navigateBack()
}

// 处理图片加载错误
const handleImageError = (e: any) => {
    console.log('图片加载失败:', e)
}

// 处理下载
const handleDownload = async () => {
    try {
        uni.showLoading({
            title: '正在下载...'
        })

        const response = await downloadResumeTemplate(templateData.value.id)
console.log('res', response)
        uni.hideLoading()

        // 如果返回了下载链接，直接下载文件
        if (response.data.template.downloadUrl) {
            uni.downloadFile({
                url: response.data.template.downloadUrl,
                success: (downloadRes) => {
                    if (downloadRes.statusCode === 200) {
                        // 下载成功后保存到手机
                        uni.saveFile({
                            tempFilePath: downloadRes.tempFilePath,
                            success: (saveRes) => {
                                console.log('文件保存成功:', saveRes.savedFilePath)
                                uni.showToast({
                                    title: '文件已保存到手机',
                                    icon: 'success'
                                })
                                
                                // 保存成功后可以选择打开预览
                                uni.openDocument({
                                    filePath: saveRes.savedFilePath,
                                    success: () => {
                                        console.log('文件打开成功')
                                    },
                                    fail: (error) => {
                                        console.error('文件打开失败:', error)
                                    }
                                })
                            },
                            fail: (error) => {
                                console.error('文件保存失败:', error)
                                uni.showToast({
                                    title: '文件保存失败',
                                    icon: 'error'
                                })
                            }
                        })
                    }
                },
                fail: (error) => {
                    console.error('文件下载失败:', error)
                    uni.showToast({
                        title: '下载失败',
                        icon: 'error'
                    })
                }
            })
        }
    } catch (error) {
        uni.hideLoading()
        console.error('下载模板失败:', error)
        uni.showToast({
            title: '请联系客服开通vip',
            icon: 'error'
        })
    }
}
</script>

<style lang="scss" scoped>
.template-detail-page {
    min-height: 100vh;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
}

// 导航栏
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10rpx);
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
}

.back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
}

.back-icon {
    font-size: 40rpx;
    color: #333;
    font-weight: bold;
}

.nav-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
}

.placeholder {
    width: 60rpx;
}

// 内容区域
.content-scroll {
    flex: 1;
}

.content {
    padding: 30rpx;
}

// 模板预览
.template-preview {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
}

.template-image {
    width: 100%;
    border-radius: 12rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
    display: block;
}

// 模板信息
.template-info {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.template-name {
    display: block;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
}

.template-stats {
    display: flex;
    gap: 40rpx;
}

.download-count,
.view-count {
    font-size: 28rpx;
    color: #666;
}

// 会员提示
.member-tip {
    background: #fff3cd;
    border: 1rpx solid #ffeaa7;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
}

.tip-text {
    font-size: 28rpx;
    color: #856404;
    text-align: center;
}

// 二维码区域
.qr-section {
    display: flex;
    justify-content: center;
    margin-bottom: 120rpx;
}

.qr-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
}

.qr-code {
    width: 200rpx;
    height: 200rpx;
    background: #f0f0f0;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-placeholder {
    font-size: 24rpx;
    color: #999;
}

// 底部下载按钮
.download-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10rpx);
    border-top: 1rpx solid rgba(0, 0, 0, 0.1);
}

.download-btn {
    background: linear-gradient(135deg, #7f66f0 0%, #a855f7 100%);
    border-radius: 50rpx;
    padding: 24rpx 0;
    text-align: center;
    box-shadow: 0 8rpx 24rpx rgba(127, 102, 240, 0.4);
    transition: transform 0.2s ease;

    &:active {
        transform: scale(0.98);
    }
}

.download-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
}
</style>
